<template>
    <div class="autoTable commonRow">
        <a-row type='flex' class="row labelValue">
            <a-col :span="item.span" class="label" v-for="item in columnList" :key="item.label">
                <span class="red" v-if="!item.noRequired">*</span>
                <span>{{ item.label }}</span>
            </a-col>
        </a-row>
        <a-row type='flex' class="row inputValue" v-for="(item, index) in newTableList" :key="index">
            <a-col :span="ele.span" class="value" v-for="(ele, key) in item" :key="key"
                :class="{ 'radioValue': ele.type === 'checkbox' }">
                <span v-if="ele.type === 'span'">
                    <span v-if="ele.props === 'index'">{{ index + 1 }}</span>
                    <span v-else>{{ ele.value }}</span>
                </span>
                <a-input v-if="ele.type === 'input'" v-model="ele.value"></a-input>
                <a-checkbox-group v-model="ele.value" :options="plainOptions" v-if="ele.type === 'checkbox'" />
            </a-col>
            <a-icon class="delClass" type="delete" @click="delClick(index)" />
        </a-row>
        <a-row type="flex" class="row addRow">
            <a-col :span="24">
                <a-icon type="plus-circle" @click="addClick" />
            </a-col>

        </a-row>
    </div>
</template>

<script>
export default {
    props: {
        plainOptions: {
            type: Array,
            default: () => []
        },
        tableList: {
            type: Array,
            default: () => []
        },
        columnList: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            newTableList: []
        }
    },
    watch: {
        tableList: {
            handler (val) {
                if (val) {
                    this.newTableList = val
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        addClick () {
            let arr = JSON.parse(JSON.stringify(this.newTableList[0]))
            arr.forEach(item => {
                if (item.value.constructor === String) {
                    item.value = ''
                } else if (item.value.constructor === Array) {
                    item.value = []
                } else if (item.value.constructor === Number) {
                    item.value = 0
                } else if (item.value.constructor === Object) {
                    item.value = {}
                }
            })
            this.newTableList.push(arr)

            this.$emit('addClick', this.newTableList)
        },
        delClick (index) {
            this.newTableList.splice(index, 1)
            this.$emit('delClick', this.newTableList)
        },
        // 最后处理完的数据
        organizeData () {
            
            let organizeData = []
            let newTableList = JSON.parse(JSON.stringify(this.newTableList))
            newTableList.forEach(item => {
                let obj = {}
                item.forEach(ele => {
                    if (ele.type === "checkbox") {
                        if (ele.value.length > 0) {
                            ele.value = ele.value.join(',')
                        } else {
                            ele.value = ''
                        }

                    }
                    obj[`${ele.props}`] = ele.value
                })
                organizeData.push(obj)
            })
            return organizeData
        }
    }
}
</script>